<template>
  <el-row class="liverow">
    <el-col :span="24">
      <div class="media-header">
        <div>
          <span class="card-header" style="display:inline-block">视频信息</span>
        </div>
        <div v-if="currentCorpId == seriesinfo.corpid" class="control-edit">
          <el-button type="primary" v-if="isedit" @click="handleCancelUpdateSeries">取消<br/>编辑</el-button>
          <el-button type="primary" v-else @click="handleUpdateSeries" :disabled="seriesinfo.state == 1">
            <span v-if="seriesinfo.state == 1">审核中</span>
            <span v-else>编辑</span>
          </el-button>
        </div>
      </div>
    </el-col>
  </el-row>
  <!-- <el-divider ></el-divider> -->
  <el-row>
    <el-col :span="24">
      <span v-if="seriesinfo && seriesinfo.tplid == '4426c5688ed111ecb86d00163e30b2e1'">
    <event-live-series
            v-if="seriesinfo"
            :seriesinfo="seriesinfo"
            :isedit="isedit"
    />
  </span>
      <span v-else-if="seriesinfo && seriesinfo.tplid == 'db5416e88ed111ecb86d00163e30b2e1'">
    <reserve-live-series
            v-if="seriesinfo"
            :seriesinfo="seriesinfo"
            :isedit="isedit"
    />
  </span>
      <span v-else-if="seriesinfo && seriesinfo.tplid == 'bcf23e6ca1ac11ec9003ecf4bbdc75f0'">
    <channel-live-series
            v-if="seriesinfo"
            :seriesinfo="seriesinfo"
            :isedit="isedit"
    />
  </span>
      <span v-else-if="seriesinfo && seriesinfo.tplid == 'dc56caf0e62811ecafd8ecf4bbc33d44'">
        <audio-series
          :seriesinfo="seriesinfo"
          :isedit="isedit"
        />
      </span>
      <span v-else>
    <vod-series
            v-if="seriesinfo"
            :seriesinfo="seriesinfo"
            :isedit="isedit"
    />
  </span>
    </el-col>
  </el-row>
  <el-row class="mt15 mb15" v-if="isedit">
    <el-col :span="24">
      <div align="middle">
        <el-button size="large" type="primary" @click="handleSaveSeriesInfo">保存修改信息</el-button>
      </div>
    </el-col>
  </el-row>
  <image-medium
          ref="imageMediumRef"
          :data-info="seriesinfo"
          :current-corpid="currentCorpId"
          rel-type="series"
          :enabled-edit-image="true"
          @reloadMediaData="getSeriesInfoData"
          @handleVideoPlay="handleVideoPlay"
          :isedit="isedit"
  />

  <span v-if="seriesinfo && liveVideoTplid.includes(seriesinfo.tplid)">
    <live-video-medium
            ref="liveVideoMediumRef"
            :seriesinfo="seriesinfo"
            :isedit="isedit"
            @handleVideoPlay="handleVideoPlay"
    />
  </span>
  <span v-else>
    <video-medium
            ref="videoMediumRef"
            v-if="seriesinfo"
            :data-info="seriesinfo"
            :current-corpid="currentCorpId"
            rel-type="series"
            :enabled-edit-video="true"
            :isedit="isedit"
            :filetype="seriesinfo.tplid == 'dc56caf0e62811ecafd8ecf4bbc33d44' ? 'audio' : 'video'"
            @handleVideoPlay="handleVideoPlay"
            @reloadImageList="getSeriesInfoData"
    />
  </span>
  <!--<media-goods
          ref="mediaGoodsRef"
          rel-type="series"
          v-if="seriesinfo"
          :current-corpid="currentCorpId"
          :data-info="seriesinfo"
          :isedit="isedit"
  />-->
  <!-- 视频播放插件开始 -->
  <video-js
          ref="videoPlayRef"
          :videoTitle="videoTitle"
          :videoSrc="videoSrc"
          :videoType="videoType"
          :videoAutoPlay="videoAutoPlay"
          :dialogVisible="videoVisible"
          @cancelVideoJs="cancelVideoJs"
  />
  <!-- 视频播放插件结束 -->
</template>

<script>
  import {nextTick, reactive, ref} from 'vue'
  import {useRoute} from 'vue-router'
  import {useStore} from 'vuex'
  import {getSeriesInfo, patchSeries} from "@/api/series/series";
  import EventLiveSeries from "./EventLiveSeries";
  import VideoJs from "@/components/player/VideoJs";
  import {getVideoPlayUrl, mimeTypeList} from "@/utils/usage-config";
  import LiveVideoMedium from "./LiveVideoMedium";
  import ReserveLiveSeries from "./ReserveLiveSeries";
  import ChannelLiveSeries from "./ChannelLiveSeries";
  import AudioSeries from "./AudioSeries";
  import ImageMedium from "../ImageMedium";
  import VodSeries from "./VodSeries";
  // import MediaGoods from "../MediaGoods";
  import {ElMessage} from 'element-plus'
  import VideoMedium from "../VideoMedium";

  export default {
    name: "SeriesInfo",
    components: { EventLiveSeries, VideoJs, LiveVideoMedium, ReserveLiveSeries, ImageMedium, VodSeries, VideoMedium, ChannelLiveSeries, AudioSeries},
    setup() {
      const route = useRoute()
      const store = useStore()
      const query = route.query
      const currentCorpId = store.getters.corpinfo.corpid
      const seriesinfo = reactive({})
      /** 视频播放参数开始 **/
      const videoVisible = ref(false)
      const videoTitle = ref('')
      const videoSrc = ref('')
      const videoType = ref('')
      const videoAutoPlay = ref(true)
      const videoPlayRef = ref(null)
      /** 视频播放参数结束 **/
      const isedit = query.isedit == 1 ? ref(true) : ref(false)
      const liveVideoMediumRef = ref(null)
      const mediaGoodsRef = ref(null)
      const imageMediumRef = ref(null)
      const videoMediumRef = ref(null)

      /** 直播tplid **/
      const liveVideoTplid = ref([
          '4426c5688ed111ecb86d00163e30b2e1',
          'db5416e88ed111ecb86d00163e30b2e1',
          'bcf23e6ca1ac11ec9003ecf4bbdc75f0'
      ])

      const handleVideoPlay = (row) => {
        videoTitle.value = row.name
        videoVisible.value = true
        videoSrc.value = getVideoPlayUrl(row)
        if (row.isself === undefined) {
          videoType.value = mimeTypeList[row.mimeid] ? mimeTypeList[row.mimeid] : 'video/mp4'
        } else {
          videoType.value = row.mimetype ? row.mimetype : 'video/mp4'
        }

        nextTick(() => {
          videoPlayRef.value.init()
        })
      }
      const cancelVideoJs = () => {
        videoVisible.value = false
      }

      const getSeriesInfoData = () => {
        getSeriesInfo({seriesid: query.seriesid}).then(response => {
          if (response.errcode == 0) {
            Object.assign(seriesinfo, response.data)
          }
          if (seriesinfo.state == 1) {
            isedit.value = false
          }
          nextTick(() => {
            if (liveVideoTplid.value.includes(seriesinfo.tplid)) {
              liveVideoMediumRef.value.init()
            } else {
              videoMediumRef.value.getVideoDataList()
            }
            imageMediumRef.value.init()
          })
        })
      }
      getSeriesInfoData()

      const handleUpdateSeries = () => {
        isedit.value = true
      }
      const handleCancelUpdateSeries = () => {
        isedit.value = false
        getSeriesInfoData()
      }
      const handleSaveSeriesInfo = () =>  {
        if (!seriesinfo.name) {
          ElMessage({type: 'warning', message: '请输入子集名称', duration: 2000})
        } else {
          patchSeries(seriesinfo).then(response => {
            if (response.errcode == 0) {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
            }
          })
        }
      }

      return {
        seriesinfo,
        getSeriesInfoData,
        handleVideoPlay,
        videoAutoPlay,
        videoVisible,
        videoTitle,
        videoPlayRef,
        videoSrc,
        videoType,
        cancelVideoJs,
        currentCorpId,
        isedit,
        handleUpdateSeries,
        query,
        handleCancelUpdateSeries,
        liveVideoMediumRef,
        mediaGoodsRef,
        imageMediumRef,
        handleSaveSeriesInfo,
        videoMediumRef,
        liveVideoTplid,
      }
    }
  }
</script>

<style lang="scss">
  .liverow{position:relative;}
  .media-header {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .control-edit{
      position: fixed;
      bottom:30px;
      right:30px;
      z-index: 1000;
      .el-button{
        width:80px;
        height:80px;
        padding:12px 10px;
        border-radius: 50%;
        font-size: 16px;
      }
    }
  }
  .card-header{
    font-size: 18px;
   // display: inline-block !important;
    font-weight: bold;
    margin-right: 10px;
  }
  .mediainfo{
    display: flex;
    flex-wrap: wrap;
    li {
      display:flex;
      margin-bottom: 10px;
      width: 50%;
      font-size: 12px;
      span{
        display: inline-block;
        color:#333;
      }
      >span:first-child{
        width:85px;
        color:#999;
      }
      >span:last-child{
        width:80%;
      }
    }
  }
</style>
